﻿<template>
    <div id="app">
        <div class="table-wraper">
            <div class="search">
                <div class='selectOption'>
                    <el-button type="success" class='checkBtn' @click='openNewSet'>新建文案</el-button>
                </div>
            </div>
            <div class="main">
                <ul class="listTitle">
                    <li v-for='item in titleList'>{{item.label}}</li>
                </ul>
                <ul class="dataList" v-for='(item,index) in tableData'>
                    <li>{{index+1}}</li>
                    <li>{{item.textType}}</li>
                    <li>{{item.createDate | formatDate}}</li>
                    <li>
                        <el-button type="info" @click='openEdit(index)'>编辑</el-button>
                        <el-button type="danger" @click='openDelete(index)'>删除</el-button>
                    </li>
                </ul>
            </div>
            <div class="block pagination" v-show='nullContentPagination'>
                <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div class="nullContent" v-show='nullContent'>暂无数据</div>
        </div>
        <div class="bomb dialogBox" v-show='isDialogShow'>
            <div class="bomb_header">
                <p>{{dialogTitle}}</p>
                <span @click="hideDialog">
                                    <img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10">
                                    </span>
            </div>
            <div class="bomb_content">
                <p class="P3">
                    <span>文案类型 ：</span>
                    <el-select v-model="selectDocumentType" placeholder="请选择">
                        <el-option v-for="item in selectOption" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </p>
                <section class="editTitle">
                    <p class="P1"><span class="title">文案标题  </span>：
                        <el-input v-model="documentTitle" placeholder="请输入内容"></el-input>
                    </p>
                    <p class="P1">
                        封面 <span class="point">图片建议尺寸：300像素*300像素</span>
                        <p class="P2">
                            <img :src="logoImg" alt="" class="logo"><input type="file" style="display:none" id="upload" @change='onFileChange'>
                            <label for="upload" class='uploadBtn'>选择图片</label>
                        </p>
                    </p>
                    <p class="P1"><span class="title">内容摘要  </span>：
                        <el-input v-model="documentAbstract" placeholder="选填,如果不填会默认抓取正文前15个字"></el-input>
                    </p>
                    <p class="P1"><span class="title">文案内容  </span>：
                        <el-input type="textarea" :rows="4" v-model="textareaContent"></el-input>
                    </p>
                </section>
            </div>
            <div class="bomb_footer">
                <input type="button" @click="save" value="保存">
                <input type="button" @click="hideDialog" value="取消">
            </div>
        </div>
        <div class="layer" v-show='layer'></div>
    </div>
</template>

<script>
    import {
        mapActions,
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                tableData: [],
                titleList: [{
                    label: '#'
                }, {
                    label: '文案类别'
                }, {
                    label: '上线时间'
                }, {
                    label: '操作'
                }],
                selectOption: [{
                    value: 6,
                    label: '邀请好友'
                }],
                currentPage: 1,
                total: 0,
                dialogTitle: '',
                selectDocumentType: '',
                isDialogShow: false,
                layer: false,
                nullContent: false,
                nullContentPagination: true,
                documentTitle: '',
                documentAbstract: '',
                textareaContent: '',
                saveType: '',
                logoImg: '',
                defaultImg: '../../../static/img/icon_xinjian_picture@2x.png',
                id: ''
            }
        },
        watch: {},
        methods: {
            // 获取文案列表
            getDocument(i) {
                let list = {
                    token: sessionStorage.token
                }
                this.$store.commit('showLoading');
                this.getDocumentList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.nullContent = false;
                        this.nullContentPagination = true;
                        if (data.data.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        for (let i = 0; i < data.data.length; i++) {
                            switch (data.data[i].textType) {
                                case 1:
                                    data.data[i].textType = '免责声明'
                                    break;
                                case 2:
                                    data.data[i].textType = '奖励规则'
                                    break;
                                case 3:
                                    data.data[i].textType = '兑换规则'
                                    break;
                                case 4:
                                    data.data[i].textType = '等级规则'
                                    break;
                                case 5:
                                    data.data[i].textType = '排行榜规则'
                                    break;
                                case 6:
                                    data.data[i].textType = '邀请内容'
                                    break;
                                case 7:
                                    data.data[i].textType = '用户协议'
                                    break;
                            }
                        }
                        this.tableData = data.data
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg));
            },
            // 保存编辑/新建
            save() {
                let list = {
                    token: sessionStorage.token,
                    textName: this.documentAbstract,
                    textImg: this.logoImg,
                    textTitle: this.documentTitle,
                    textContent: this.textareaContent,
                    textType: this.selectDocumentType
                }
                if (this.selectDocumentType == '' || this.documentTitle == '' || this.textareaContent == '' || this.logoImg == this.defaultImg) {
                    this.$message.warning('请完善文案内容!')
                    return;
                }
                if (this.saveType == 1) {
                    //新建
                    this.addDocument(list).then((data) => {
                        console.log(data);
                        if (data.code === 200) {
                            this.$message.success('新建成功!')
                            this.handleCurrentChange(this.currentPage);
                        } else {
                            this.$message(data.message)
                        }
                    }).catch(msg => console.log(msg));
                } else {
                    // 编辑
                    list.id = this.id;
                    this.updateDocument(list).then((data) => {
                        console.log(data);
                        if (data.code === 200) {
                            this.$message.success('编辑成功!')
                            this.handleCurrentChange(this.currentPage);
                        } else {
                            this.$message(data.message)
                        }
                    }).catch(msg => console.log(msg));
                }
                this.hideDialog()
            },
            // 分页跳转
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getDocument(val);
            },
            // 打开编辑弹框
            openEdit(i) {
                this.layer = this.isDialogShow = true;
                this.dialogTitle = '编辑文案';
                this.saveType = 2;
                this.logoImg = this.tableData[i].textImg;
                this.id = this.tableData[i].id;
                this.documentAbstract = this.tableData[i].textName;
                this.documentTitle = this.tableData[i].textTitle;
                this.textareaContent = this.tableData[i].textContent;
            },
            // 打开新建弹框
            openNewSet() {
                this.layer = this.isDialogShow = true;
                this.dialogTitle = '新建文案';
                this.saveType = 1;
                this.logoImg = this.defaultImg;
                this.documentAbstract = '';
                this.documentTitle = '';
                this.textareaContent = '';
            },
            // 删除文案
            delete(i) {
                let list = {
                    id: this.tableData[i].id,
                    token: sessionStorage.token
                }
                this.deleteDocument(list).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('删除成功!')
                        this.handleCurrentChange(this.currentPage);
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg));
            },
            // 打开删除
            openDelete(i) {
                this.$confirm('确定删除此项配置?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delete(i);
                }).catch(() => {});
            },
            // 隐藏弹框
            hideDialog() {
                this.layer = this.isDialogShow = false;
            },
            // 选择图片上传
            onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!/\.(jpg|jpeg|png|gif)$/i.test(files[0].name) || !files.length) {
                    this.$message.warning('请选择正确图片格式!')
                    return;
                }
                this.uploadImage(files[0]);
            },
            // 上传图片
            uploadImage(file) {
                var formdata = new FormData();
                formdata.append('token', sessionStorage.token);
                formdata.append('appId', "com_sxluckyking_double");
                formdata.append('file', file);
                formdata.append('appName', 'appName');
                this.uploadFile(formdata).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('图片上传成功!')
                        this.logoImg = data.data[0].path;
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg));
            },
            ...mapActions(['getDocumentList', 'uploadFile', 'addDocument', 'updateDocument', 'deleteDocument'])
        },
        created: function() {
            this.getDocument(1);
        },
        filters: {
            // 格式化日期
            formatDate(date) {
                let y, m, d, h, i, s,
                    t = new Date(parseInt(date));
                y = t.getFullYear()
                m = t.getMonth() + 1
                d = t.getDate()
                h = t.getHours()
                i = t.getMinutes()
                s = t.getSeconds()
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
            }
        }
    }
</script>

<style scoped>
    #app {
        position: relative;
    }
    p,
    ul,
    h2,
    h4 {
        margin: 0;
    }
    h2 {
        text-align: center;
        color: rgb(109, 148, 189);
        border-bottom: 1px solid #ccc;
        padding: 10px 0 20px 0;
        font-size: 20px;
    }
    .table-wraper {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    .el-table {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .listTitle li:last-child,
    .dataList li:last-child {
        border-right: none;
    }
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 20%;
    }
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 30%;
    }
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 30%;
    }
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 20%;
    }
    .dialogBox {
        width: 595px;
        height: 600px;
    }
    .dialogBox .bomb_content{
        height:452px;
    }
    .dialogBox section {
        width: 100%;
        height: 420px;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow-y: scroll;
    }
    .editTitle .el-input {
        width: 60%;
    }
    .P1 {
        text-align: left;
        padding: 10px 10px 20px 10px;
    }
    .P2 {
        text-align: left;
        padding: 10px 0 0 10px;
        position: relative;
    }
    .P3 {
        text-align: left;
        padding: 10px;
    }
    .title {
        font-weight: bold;
    }
    .point {
        color: #a9a9a9;
    }
    .logo {
        max-width: 90px;
    }
    .imgBox {
        position: relative;
        padding: 0;
    }
    .uploadBtn {
        position: absolute;
        bottom: 0;
        left: 120px;
    }
    .userInfoClose {
        position: absolute;
        top: 25px;
        right: 50px;
        cursor: pointer;
    }
    .search {
        width: 100%;
        padding: 8px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .selectOption {
        float: right;
        text-align: right;
    }
    .checkBtn {
        width: 96px;
    }
</style>
